<script setup>
import {get, post, del, put} from '../../api/http'
import { ref } from 'vue';
import { onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Plus, Search } from '@element-plus/icons-vue';
import { menuStore } from '../../utils/store';

const menuList = ref([])
const total = ref(0)
const pageNum = ref(1)
const showMenuDialog = ref(false)
const menu = ref({})
const isAddOption = ref(true)
const selectedList = ref([])
const roleList = ref([])
const loading = ref(false)

const getRoleList = () => {
    get('role/list').then(res=>{
        roleList.value = res.data.list
    })
}

const getMenuList = () => {
    loading.value = true
    get('menu/all').then(res=>{
        if(res.status, {pageNum:pageNum.value, pageSize: 10}){
            menuList.value = res.data.list
            total.value = res.data.total
        }else{
            ElMessage({type:'error', message:res.msg})
        }
        loading.value = false
    })
}

const reloadHomeMenu = () => {
    get('menu').then(res=>{
        if(res.status){
            menuStore.menuList = res.data
        }
    })
}

const submitMenu = () => {
    if(isAddOption.value){
        post('menu', menu.value).then(res=>{
            if(res.status){
                getMenuList()
                showMenuDialog.value = false
                resetMenuForm()
                reloadHomeMenu()
            }else{
                ElMessage({type:'error', message: res.msg})
            }
        })
    }else{
        put('menu', menu.value).then(res=>{
            if(res.status){
                getMenuList()
                showMenuDialog.value = false
                resetMenuForm()
                reloadHomeMenu()
            }else{
                ElMessage({type:'error', message: res.msg})
            }
        })
    }
}

const removeMenuBatch = () => {
    if(selectedList.value.length == 0){
        ElMessageBox.alert('请至少选择一条后删除','提示',{type:'warning'})
        return;
    }
    removeMenu(-1)
}

const handleSelected = (item) => {
    let temp = []
    item.forEach(element => {
        temp.push(element.id)
    });
    selectedList.value = temp
}

const removeMenu = (id) => {
    if(id != -1){
        selectedList.value = []
        selectedList.value.push(id)
    }
    ElMessageBox.confirm('该操作将永久删除此菜单，是否继续？','提示',{type:'warnging'}).then(()=>{
        del('menu',selectedList.value).then(res=>{
            ElMessage({type: res.status?'success':'error', message: res.msg})
            if(res.status){
                getMenuList()
                reloadHomeMenu()
            }
        })
    })
}

const resetMenuForm = () => {
    menu.value = {}
}

const edit = (data) => {
    getRoleList();
    menu.value = data
    isAddOption.value = false
    showMenuDialog.value = true
}

onMounted(()=>{
    getMenuList()
})

</script>
<template>
    <main v-blog-title data-title="菜单管理">
        <div class="toolBar">
            <el-input placeholder="关键字搜索" style="width: 300px;" :suffix-icon="Search"></el-input>
            <el-button @click="isAddOption=true; showMenuDialog=true;getRoleList()" style="margin-left:10px;" type="primary" :icon="Plus">添加菜单</el-button>
            <el-button @click="removeMenuBatch" style="margin-left:10px;" type="danger" :icon="Delete">删除选中</el-button>
        </div>
        <el-table :data="menuList" border @selection-change="handleSelected" v-loading="loading">
            <el-table-column type="selection" width="40" />
            <el-table-column label="权重" prop="menuSort" width="80" align="center"></el-table-column>
            <el-table-column label="菜单名称" prop="menuName"></el-table-column>
            <el-table-column label="菜单路由" prop="menuRoute"></el-table-column>
            <el-table-column show-overflow-tooltip label="父菜单ID" prop="parentId">
                <template #default="scope">
                    {{ menuList.find(v=>{return v.id == scope.row.parentId}) ? menuList.find(v=>{return v.id == scope.row.parentId}).menuName : '/' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button @click="edit(scope.row)" plain :icon="Edit" type="primary" size="small">编辑</el-button>
                    <el-button @click="removeMenu(scope.row.id)" plain size="small" :icon="Delete" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog width="30%" title="菜单信息" v-model="showMenuDialog">
            <el-form>
                <el-form-item label="菜单名称">
                    <el-input v-model="menu.menuName" placeholder="输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单路由">
                    <el-input v-model="menu.menuRoute" placeholder="输入菜单路由"></el-input>
                </el-form-item>
                <el-form-item label="允许角色">
                    <el-select v-model="menu.roleList" style="width: 100%;" multiple>
                        <el-option v-for="r in roleList" :key="r.id" :label="r.roleName" :value="r.roleCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父级菜单">
                    <el-select v-model="menu.parentId" style="width: 100%;">
                        <el-option v-for="m in menuList" :key="m.id" :label="m.menuName" :value="m.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div style="width: 100%; text-align: right;">
                        <el-button @click="showMenuDialog=false" type="info">取消</el-button>
                        <el-button @click="submitMenu" type="primary">确定</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </main>
</template>
<style scoped>
main{
    margin: 10px;
}
.toolBar{
    margin-bottom: 10px;
}
</style>